import React from 'react';
import { Icon, Form, Input, Button } from 'antd';

const FormItem = Form.Item;

/**
 * Header 修改密码form
 */
class TestForm extends React.Component {
  
/**
 * 新密码验证
 */
handleConfirmPassword = (rule, value, callback) => {
        const { getFieldValue } = this.props.form
        if (value && value !== getFieldValue('plainPassword')) {
            callback('两次输入不一致！')
        }
        callback()
 }

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
          <Form method="post" className="login-form" >
            <FormItem>
              {getFieldDecorator('oldPassword', {
                rules: [
                         { required: true, message: '请输入原密码!' },
                         { min: 6, message: '请输入至少6位密码' }
                       ],
              })(
                <Input addonBefore={<Icon type="lock" />} type="password" placeholder="原密码" />
                )}
            </FormItem>

            <FormItem>
              {getFieldDecorator('plainPassword', {
                rules: [
                         { required: true, message: '请输入密码!' },
                         { min: 6, message: '请输入至少6位密码' }
                       ],
              })(
                <Input addonBefore={<Icon type="lock" />} type="password" placeholder="新密码" />
                )}
            </FormItem>
            
            <FormItem>
              {getFieldDecorator('rPassword', {
                rules: [ 
                         { required: true, message: '请再次输入密码!' },
                         { min: 6, message: '请输入至少6位密码' },
                         {
                           validator:this.handleConfirmPassword
                         }
                       ],
              })(
                <Input addonBefore={<Icon type="lock" />} type="password" placeholder="请再次输入密码" />
                )}
            </FormItem>
          </Form>
    );
  }
}

TestForm = Form.create({})(TestForm);

export default TestForm;
